import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import {AtGrid, AtAvatar, AtIcon } from 'taro-ui'

import './userCenter.scss'
import {image_avatar} from '../../utils/images'
import {TabBar} from '../../components/navigation/TabBar'

export default class UserCenter extends Component {

  constructor(props){
      super(props);
      this.state = {
        
      }
  }

  handleClick = (value, index) => {
    const user=Taro.getStorageSync('userInfo')
    if(user == ''){
      Taro.showModal({
        title: 'Tip',
        content: '您尚未登录登录！前往登录',
        cancelText:'取消',
        confirmText:'确认',
        success: function (res) {
          if (res.confirm) {
            Taro.navigateTo({url: '/pages/pagesB/login/login'})
          } else if (res.cancel) {
  
          }
        }
      })
    }else if(index==0){
      Taro.navigateTo({url: '/pages/pagesB/myOrder/myOrder'})
    }else{
        Taro.navigateTo({url: '/pages/pagesB/strictInfo/strictInfo'})
      }
  }
 
  render () {

    // 根据是否登录来选择组件的状态
    const user=Taro.getStorageSync('userInfo')
    // 获取微信/支付宝头像
    const userT = Taro.getStorageSync('userWeChatInfo')
    
    return (
      <View>
        {/* 账号模块,根据是否登录状态显示不同的组件 */}
        {
          user.isLogin?(
            <view className='isLog' onClick={() =>Taro.navigateTo({url: '/pages/pagesB/myInfo/myInfo'})}>
              <AtAvatar circle Text='头像' className='avatar' image={userT.avatarUrl}></AtAvatar>
              <Text className='logNickName'>{userT.nickName}</Text>
              <Text className='logPhone'>{user.userPhone}</Text>
              <AtIcon value='chevron-right' className='redirect' size='30' color='#999'></AtIcon>
            </view>
            
          ):(
            <view className='isNotLog' onClick={() =>Taro.navigateTo({url: '/pages/pagesB/login/login'})}>
              <AtAvatar circle Text='头像' className='avatar' image={image_avatar}></AtAvatar>
              <Text className='notLogText'>未登录</Text>
              <AtIcon value='chevron-right' className='redirect' size='30' color='#999'></AtIcon>
            </view>
          )
        }
        
        {/* 功能模块 */}
        <view className='myService'>
          <Text className='myServiceText'>我的服务</Text>
          {/* 功能栅格 */}
          <AtGrid onClick={this.handleClick} data={
            [
              {
                image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
                value: '我的订单',
              },
              {
                image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
                value: '身份信息',
              }        
            ]
          } />
        </view>
        <TabBar className='tab_bar' current={1}/>
      </View>
    )
  }
}